<template>
  <div>
    <div style="width: 100%; height: 100vh; overflow: hidden" class="bgImg">
      <div class="login-card">
          <img src="../assets/logo.png" alt="Logo" class="logo-img">
          <div class="item" style="font-size: 20px; color: black;">西北特产公益商城</div>
          <div class="item">
              <input type="text" class="inputItem" placeholder="请输入用户名" v-model="user.username">
          </div>

          <div class="item">
              <input type="password" class="inputItem" placeholder="请输入密码" v-model="user.password">
          </div>
          <div class="item">
              <button class="loginBtn" @click="login">登录</button>
          </div>
          <div style="padding: 10px 0; text-align: center">
              <span style="cursor: pointer; color: #409eff; margin-left: 10px; font-size: 16px;" @click="goRegister">用户注册</span>
          </div>
      </div>
  </div>

    <!-- 弹窗   -->
    <el-dialog title="忘记密码" :visible.sync="dialogFormVisible" width="30%"
               :close-on-click-modal="false" >
      <el-form :model="reset">
        <el-form-item label="用户名" label-width="150px">
          <el-input v-model="reset.username" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="150px">
          <el-input v-model="reset.phone" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="新密码" label-width="150px">
          <el-input show-password v-model="reset.password" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">重置</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/utils/request";
import {resetRouter} from "@/router";
import Identify from "@/components/common/Identify";


export default {
  name: "Login",
  data() {
    return {
      reset: {},
      dialogFormVisible: false,
      user: {
          username: "",
          password: "",
          code: "",
          uuid: "",
          rememberMe: false
      },
      // 图片验证码
      identifyCode: '',
      // 验证码规则
      identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
    }
  },
  mounted() {
    this.refreshCode()
  },
  components: {Identify},
  methods: {
    goRegister() {
      this.$router.replace("/register")
    },
    preReset() {
      this.dialogFormVisible = true
      this.reset = {}
    },
    save() {
      API.put("/system/user/reset", this.reset).then(res => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "重置成功"
          })
          this.dialogFormVisible = false
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length))]
      }
    },
    login() {
      if (!this.user.username) {
        this.$message({
          type: "warning",
          message: "请输入用户名"
        })
        return;
      }
      if (!this.user.password) {
        this.$message({
          type: "warning",
          message: "请输入密码"
        })
        return;
      }
      API.post("/login", this.user).then(res => {
        if (res.code === 200) {
          sessionStorage.setItem("token", res.token)
          API.get("/getInfo").then(res2 => {
            sessionStorage.setItem("url", 'http://localhost:8080')
            // sessionStorage.setItem("url", 'http://49.232.89.223:18000')
            sessionStorage.setItem("user", JSON.stringify(res2.user))
            // 重置路由
            resetRouter(JSON.parse(JSON.stringify(res2.permissions)))
            this.$router.replace("/front/home")
          })
          this.$message({
            type: "success",
            message: "登录成功",
            duration: 1500
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.logo-img {
    width: 100px; /* 根据需要调整大小 */
    /* margin-bottom: 20px; */
}
.bgImg {
  background-size: 100% 100vh;
}

.item {
  text-align: center;
  padding: 10px 0
}

.loginBtn {
  background: forestgreen;
  border-radius: 5px;
  color: white;
  width: 100%;
  padding: 10px;
  cursor: pointer
}

.inputItem {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

.bgImg {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* background-image: url("../assets/bg.jpg") no-repeat;  */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 500px;
    height: 520px;
    border-radius: 10px;
    margin: 50px auto;
    box-shadow: 10px 10px 10px rgba(149, 126, 126, 0.5);
    background-color: rgba(255, 255, 255, 0.9); /* 背景颜色带透明度 */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.item {
    width: 100%;
    margin-bottom: 20px;
}

.inputItem {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}

.inputItem:focus {
    border-color: #409eff;
}

.loginBtn {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: white;
    background-color: #1890ff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .2s;
}

.loginBtn:hover {
    background-color: #409eff;
}
</style>